#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>

</style>
#end

#define js()
<script type="text/javascript">
      layui.use(['table', 'layer'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , id: 'dateTable'
            , even: true //开启隔行背景
            , size: 'sm' //小尺寸的表格
            , height: 'full-160'    //容器高度
            , cols: [[
                ,{field: 'name', title: '配置名称', width: 300}
                , {field: 'value', title: '属性值', width: 200}
                , {field: 'des', title: '说明', width: 300}
                , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , url: '#(ctxPath)/system/versionInfo/tableData'
            , method: 'get'
            , request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
            , done: function (res, curr, count) {

            }
        });

        table.on('tool(dateTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    util.sendAjax ({
                        type: 'POST',
                        url: '#(ctxPath)/system/versionInfo/delete',
                        data: {id : data.id},
                        loadFlag: true,
                        success : function(data){
                            layer.close(index);
                            reloadTableQuery();
                        },
                        unSuccess: function (data) {
                            layer.close(index);
                        }
                    })
                });
            } else if(obj.event === 'edit') {
                pop_show('编辑数据','#(ctxPath)/system/versionInfo/update?id=' + data.id,'','', function(){
                    reloadTableQuery();
                });
            }
        });

        $("#add").click(function(){
            pop_show('添加数据','#(ctxPath)/system/versionInfo/add','500','400', function(){
                reloadTableQuery();
            });
        });

        reloadTableQuery = function () {
            table.reload('dateTable', {
                url: '#(ctxPath)/system/versionInfo/tableData'
                ,where: {name: $('#name').val()} //设定异步数据接口的额外参数
            });
        }

    });
</script>
#end

#define content()
<div class="layui-fluid">

    <div class="layui-row">
        <div class="layui-btn-group">
            #shiroHasPermission('/system/versionInfo/add')
            <button id="add" class="layui-btn layui-btn-small">新增配置</button>
            #end
        </div>

        <table id="dateTable" lay-filter="dateTable"></table>
    </div>
</div>

<script type="text/html" id="barOption">
    #shiroHasPermission('/system/versionInfo/update')
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    #end

    #shiroHasPermission('/system/versionInfo/delete')
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    #end
</script>
#end